/**
 * Created by xiangjiayu on 2017/6/26.
 * 订单详情
 */

import React from 'react';
import Immutable from 'immutable'
import {Table, Icon,Button,Tooltip,Row,Col,Input,Select,DatePicker,Cascader,Radio,Dropdown,Menu,Checkbox,Steps,Modal,Form,Pagination,Popconfirm,Timeline,Tabs,Upload,Tag,Card,Popover} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon'; //自定义字体图标
import AddressSelect from '../../components/common/AddressSelect/AddressSelect'; //


import ImageList from 'upload/ImageList'
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const { MonthPicker, RangePicker } = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const TabPane = Tabs.TabPane;


export default class CepingInfo  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          chooiced:false,
        }
    }

    render(){
        //表格
        const dataSource = []
        for (let i = 1; i < 6; i++) {
          dataSource.push({
            key: i,
            id: i,
            problem: '您容易疲乏吗?',
            answer1: '1',
            answer2: '2',
            answer3: '3',
            answer4: '4',
            answer5: '5',
          });
        }
        const columns = [
          {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width:'5%',
            className: 'ant-table-th-center',
          }, {
            title: '问题',
            dataIndex: 'problem',
            key: 'problem',
            width:'35%',
            render: (value) => {
              return (
                <Tooltip placement="top" title={value}>
                  <span>{value}</span>
                </Tooltip>
              )
            },
          }, {
            title: '没有(根本不)',
            dataIndex: 'answer1',
            key: 'answer1',
            width:'12%',
            className: 'ant-table-th-center',
            render: (value) => {
              return (
                <span className="table-chooiced">{value}</span>
              )
            },
          }, {
            title: '很少(有一点)',
            dataIndex: 'answer2',
            key: 'answer2',
            width:'12%',
            className: 'ant-table-th-center',
          }, {
            title: '有时(有些)',
            dataIndex: 'answer3',
            key: 'answer3',
            width:'12%',
            className: 'ant-table-th-center',
          }, {
            title: '经常(相当)',
            dataIndex: 'answer4',
            key: 'answer4',
            width:'12%',
            className: 'ant-table-th-center',
          }, {
            title: '总是(非常)',
            dataIndex: 'answer5',
            key: 'answer5',
            width:'12%',
            className: 'ant-table-th-center',
          }
        ];
        return(
            <div className="info-cont">
                <div className="slip-title">
                    <div className="slip-base">
                        <div className="slip-left">
                            <h4>测评详情</h4>
                        </div>
                        <div className="slip-right">
                            <ul>
                                <li>客户姓名：熊师虎</li>
                                <li>测评时间：2017-05-31 18:19:19 - 2017-05-31 18:19:19</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="slip-body">
                    {/*备孕期测评*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">备孕期测评</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="slip-cp-title">孕妇体质分类与判定</div>
                            <div className="slip-cp-result">测评结果: 偏颇（中度血淤、中度阳虚、重度血虚、重度气郁、轻度湿热、重度易敏）</div>
                            <div className="table-top-title">平和质</div>
                            {/*表格*/}
                            <Table columns={columns}
                                   bordered
                                   size="middle"
                                   dataSource={dataSource}
                                   pagination={false}
                            />
                            <div className="table-bottom-title">判断结果：21/中度阳虚</div>
                            <div className="table-top-title">气虚质</div>
                            {/*表格*/}
                            <Table columns={columns}
                                   bordered
                                   size="middle"
                                   dataSource={dataSource}
                                   pagination={false}
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}